<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>事件的绑定</title>
        <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
    </head>

    <body>
        <!--
            TODO:事件的绑定：
            1.使用v-on:xxx 或 @xxx 绑定事件，其中xxx是事件名，原生有的DOM事件都可以写；
            2.事件的回调函数需要配置在methods中；
            3.methdos中的函数最终也会出现在vm上（但不存在数据代理了，是直接放在vm上的）；
            4.methods中配置的函数，是Vue所管理的函数，所以务必要写成普通函数；
        -->
        <div id="root">
            <p>{{title}}</p>
        </div>

        <script>
            Vue.config.productionTip = false;
            new Vue({
                el: '#root',
                data: {
                    title: 'Vue2',
                },
            });
        </script>
    </body>
</html>
